<template>
  <!-- 个人中心 -->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="8"></ceList>
      <div class="con">
        <div class="bianji">
          <div class="ming">编辑资料</div>
          <div class="lei" style="margin-top: 60px">
            <p class="p" style="vertical-align: top">头像</p>
            <!-- :action="$upLoad" -->
            <el-upload ref="upload" class="avatar-uploader" :show-file-list="false" :action="$upLoad"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-change="uploadFile"
              :auto-upload="false">
              <img v-if="imageUrl || 'https://pic.bangbangtongcheng.com/static/my/header.png'"
                :src="imageUrl || 'https://pic.bangbangtongcheng.com/static/my/header.png'" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div style="
                display: flex;
                background-color: #707070;
                color: #ffffff;
                font-size: 16px;
                width: 178px;
                align-items: center;
                justify-content: center;
                position: relative;
                left: 385px;
                bottom: 24px;
                cursor:pointer;
              " @click='goUploadTou'>
              <p class="el-icon-circle-plus-outline"></p>
              <div>本地上传头像</div>
            </div>
          </div>
          <div class="lei">
            <p class="p">昵称</p>
            <el-input v-model="user.nikeName" placeholder="请输入名称"></el-input>
            <div class="div" @click="updata(1)">
              <p class="el-icon-edit" style="font-size: 24px"></p>
              修改
            </div>
          </div>
          <!-- <div class="lei">
            <p class="p">登录账号</p>
            <el-input v-model="userdata.phone" placeholder="请输入登录账号"></el-input>
            <div class="div">
              <p class="el-icon-edit" style="font-size: 24px;"></p>修改
            </div>
          </div> -->
          <div class="lei">
            <p class="p">联系电话</p>
            <el-input v-model="user.phone" placeholder="请输入联系电话" :disabled='!modifyPhone'></el-input>
            <div class="div" @click="updata(2)">
              <p class="el-icon-edit" style="font-size: 24px"></p>
              修改
            </div>
          </div>
        </div>
        <div class="bianji">
          <!-- <div class="ming">修改密码</div> -->
          <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="修改密码" name="first">
                <div class="lei">
                  <p class="p">输入旧密码</p>
                  <el-input show-password v-model="oldpwd" placeholder="请输入旧密码"></el-input>
                  <div class="div">
                    <!-- <p class="el-icon-edit" style="font-size: 24px;"></p>修改 -->
                  </div>
                </div>
                <div class="lei">
                  <p class="p">设置新密码</p>
                  <el-input show-password v-model="onepwd" placeholder="设置新密码"></el-input>
                  <div class="div">
                    <!-- <p class="el-icon-edit" style="font-size: 24px;"></p>修改 -->
                  </div>
                </div>
                <div class="lei">
                  <p class="p">确认新密码</p>
                  <el-input show-password v-model="twopwd" placeholder="确认新密码"></el-input>
                  <div class="div">
                    <!-- <p class="el-icon-edit" style="font-size: 24px;"></p>修改 -->
                  </div>
                </div>
                <div class="but" @click="updatPwd(1)">保存修改</div>
              </el-tab-pane>
              <el-tab-pane label="重置密码" name="second">
                <div class="lei">
                  <p class="p">输入手机号</p>
                  <el-input v-model="phone" placeholder="输入手机号"></el-input>
                  <div class="div">
                    <!-- <p class="el-icon-edit" style="font-size: 24px;"></p>修改 -->
                  </div>
                </div>

                <div class="lei">
                  <p class="p">输入验证码</p>
                  <el-input v-model="phoneCode" placeholder="输入验证码"></el-input>
                  <p class="input_p" @click="phoneCodeClick">
                    {{ yzm }}
                  </p>
                </div>
                <!-- <div style="position: relative">
					<input type="text" v-model="phoneCode" placeholder="请输入验证码" />
					
				 </div> -->
                <div class="lei">
                  <p class="p">设置新密码</p>
                  <el-input show-password v-model="onepwd" placeholder="设置新密码"></el-input>
                  <div class="div">
                    <!-- <p class="el-icon-edit" style="font-size: 24px;"></p>修改 -->
                  </div>
                </div>
                <div class="lei">
                  <p class="p">确认新密码</p>
                  <el-input show-password v-model="twopwd" placeholder="确认新密码"></el-input>
                  <div class="div">
                    <!-- <p class="el-icon-edit" style="font-size: 24px;"></p>修改 -->
                  </div>
                </div>
                <div class="but" @click="updatPwd(2)">保存修改</div>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
        <div class="bianji">
          <div class="ming">账号注销</div>
          <div class="wenben">
            <h4>账号注销条件:</h4>
            <p>
              当前为账号注销页面，注销账号前，我们需要对您的信息进行审核，以保证您的账号安全，且审核时间段内，请保证您的账号状态如下:
              <br />·账号为正常状态 <br />·账号无任何纠纷，包含投诉举报
              <br />·账号处于安全状态，无被盗风险
            </p>
          </div>
          <div class="wenben">
            <h4>账号注销须知:</h4>
            <p>
              ·账号注销后，您的账号下的全部权益将清除
              <br />·账号注销后，您的账号下的所有数据、记录等将无法访问和找回
              <br />·账号一旦注销完成，将无法恢复
              <br />·账号注销处理需要一定的周期，请您耐心等待。
            </p>
          </div>
          <div class="Departure ">
            <div class="btn" v-if="user.isAgent == 1 && user.shopType != 2" @click="voluntary">主动离职</div>
            <div class="btn" @click="updata(4)">继续注销</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="topVisible" width="26%" center :show-close="false" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div style="width: 100%; display: flex; flex-direction: column">
        <div style="
            display: flex;
            color: #000000;
            font-size: 20px;
            font-weight: 400;
            padding: 10px 20px;
          ">
          <div>置顶信息：</div>
          <div>
            <div style="
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 240px;
              " v-for="(item, index) in houseList" v-if="item.choose" :key="index">
              {{ item.title }}
            </div>
          </div>
        </div>
        <div style="
            display: flex;
            margin-top: 26px;
            align-items: center;
            padding: 0px 20px;
          ">
          <div style="color: #000000; font-size: 20px">置顶天数：</div>
          <input v-model="day" placeholder="请输入置顶天数" style="border: #e0e0e0 1px solid; width: 240px" />
        </div>
        <div style="
            color: #ea4b4b;
            font-size: 18px;
            margin-top: 31px;
            padding: 0px 20px;
          ">
          平台规则：每天限定置顶20条次，置顶信息按时间排序
        </div>
        <div style="
            width: 100%;
            height: 65px;
            margin-top: 32px;
            font-size: 21px;
            font-weight: 400;
            display: flex;
          ">
          <div style="
              width: 50%;
              background-color: #f2f2f2;
              color: #333333;
              text-align: center;
              line-height: 65px;
              border-bottom-left-radius: 10px;
              cursor: pointer;
            " @click="topVisible = false">
            取消
          </div>
          <div style="
              width: 50%;
              background-color: #64b6a8;
              color: #ffffff;
              text-align: center;
              line-height: 65px;
              border-bottom-right-radius: 10px;
              cursor: pointer;
            " @click="topSub">
            确认
          </div>
        </div>
      </div>
    </el-dialog>
    <floor></floor>
    <div style="
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgb(0, 0, 0, 0.7);
        z-index: 100;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      " v-if="phonestate">
      <div style="
          color: #000000;
          width: 400px;
          background-color: #fff;
          display: flex;
          flex-direction: column;
          padding: 30px;
          align-items: center;
          border-radius: 10px;
          justify-content: space-between;
        ">
        <span style="font-size: 18px; font-weight: 600">修改手机号</span>
        <div style="
            display: flex;
            width: 100%;
            align-items: center;
            margin: 30px 0;
          ">
          <span style="font-size: 16px; font-weight: 400; width: 40%">请输入新的手机号</span>
          <input style="
              border-radius: 5px;
              flex: 1;
              border: #cccccc 1px solid;
              height: 40px;
              font-size: 16px;
              padding: 0px 10px;
              font-weight: 400;
            " v-model="newPhone" />
        </div>
        <div style="display: flex; width: 100%; align-items: center">
          <span style="font-size: 16px; font-weight: 400; width: 40%">请输入验证码</span>
          <div style="
              flex: 1;
              display: flex;
              height: 40px;
              padding: 0px 10px;
              border: #cccccc 1px solid;
              border-radius: 5px;
              align-items: center;
              justify-content: space-between;
            ">
            <input style="font-size: 16px; font-weight: 400; width: 120px" v-model="phoneCode" />
            <div style="
                width: 2px;
                height: 50%;
                background-color: #64b6a8;
                border-radius: 4px;
              "></div>
            <div style="
                font-size: 14px;
                color: #64b6a8;
                cursor: pointer;
                flex: 1;
                text-align: center;
              " @click="getCode" v-if="codeTime == 60">
              获取验证码
            </div>
            <div style="
                font-size: 14px;
                color: #64b6a8;
                cursor: pointer;
                flex: 1;
                text-align: center;
              " v-else>
              {{ codeTime }}s
            </div>
          </div>
        </div>
        <div style="
            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: center;
            margin-top: 32px;
          ">
          <div style="
              display: flex;
              width: 100%;
              background-color: #64b6a8;
              align-items: center;
              justify-content: center;
              color: #ffffff;
              height: 40px;
              border-radius: 6px;
              cursor: pointer;
            " @click="btnSub(true)">
            确认
          </div>
          <div style="
              color: #777777;
              font-size: 14px;
              cursor: pointer;
              margin-top: 5px;
            " @click="btnSub(false)">
            取消
          </div>
        </div>
      </div>
    </div>
    <div class="con2" v-if="con2">
      <slide-verify class="verify" ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess"
        @fail="onFail" @refresh="onRefresh" :slider-text="text">
        <!-- :accuracy="accuracy" -->
      </slide-verify>
      <i class="el-icon-circle-close" style="position: absolute;
        right: 38.5%;
        font-size: 40px;
        cursor:pointer;
        top: 34.4%;" @click="ycCon()"></i>
    </div>
    <el-dialog title="图片" :visible.sync="dialogFormVisible">
      <div style="width: 100%; height: 500px">
        <vue-cropper autoCrop :fixedBox="option.fixedBox" :fixed="option.fixed" :fixedNumber="option.fixedNumber"
          :img="showImg" ref="cropper" centerBox />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmnn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import ceList from "../../components/ceList.vue";
import titlesearch from "../../components/titlesearch.vue";
import axios from "axios";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
  },

  data() {
    return {
      showImg: "",
      dialogFormVisible: false,
      option: {
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式 jpeg, png, webp
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 345, // 默认生成截图框宽度
        autoCropHeight: 245, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: true, // 是否输出原图比例的截图
        enlarge: '1', // 图片根据截图框输出比例倍数
        mode: 'contain', // 图片默认渲染方式 contain , cover, 100px, 100% auto
        modifyPhone: true
      },

      activeName: "first",
      yzm: "获取验证码",
      options: [
        { value: 0, label: "首页" },
        { value: 1, label: "房源信息" },
      ],
      options2: [
        { value: 1, label: "上架" },
        { value: 2, label: "下架" },
        { value: 3, label: "已出租" },
        { value: 4, label: "已出售" },
      ],
      compilestate: false,
      housevalue: "",
      housevalue2: "",
      xuan: 8,
      imageUrl: "",
      input: "",
      user: {
        nikeName: '',
        phone: ''
      },
      loginstate: false,
      userdata: {},
      houseList: [],
      housetotal: 0,
      houseindex: 1,
      topVisible: false,
      xzList: [],
      day: "",
      phone: "",
      newPhone: "",
      oldpwd: "",
      onepwd: "",
      twopwd: "",
      phoneCode: "",
      shijian: 60,
      imgurl: this.$img,
      codeTime: 60,
      phonestate: false,
      con2: false,
      text: '',
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    voluntary() {
      if (this.user.isAgent == 0) {
        this.$message('您还不是经纪人！');
        return;
      } else {
        if (this.user.isShop == 1) {
          this.$message('商家不能主动离职,仅能注销！');
          return;
        }
        this.$confirm('确定要主动离职吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$postHttp("mob/user/autoconfirmResignation", {
            userId: this.user.id
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.getUserInfo();
            this.$router.push({ path: "/", });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    goUploadTou() {
      console.log("object");
      this.$refs.upload.submit()
    },
    uploadImg(e) { },
    uploadFile(file, fileList) {
      console.log(file, fileList);
      if (file.percentage + "" == "0") {
        const isJPG = file.raw.type.substring(0, 5) === "image" || file.raw.type.substring(6, 7) == 'g';
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        //    this.showImg =file.raw
        this.showImg = URL.createObjectURL(file.raw);
        this.dialogFormVisible = true;
      } else {
        //   const isJPG = file.type === "image/jpeg";
        // const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isJPG) {
        //   this.$message.error("上传头像图片只能是 JPG 格式!");
        // }
        // if (!isLt2M) {
        //   this.$message.error("上传图片大小不能超过2M");
        // }
      }
    },
    confirmnn() {
      this.dialogFormVisible = false;
      // this.$refs.upload.submit()

      this.getCropData();
    },
    //   裁剪圖片
    getCropData() {
      let self = this;
      this.$refs.cropper.getCropData((data) => {
        console.log(data);
        let param = new FormData(); // 创建form对象
        param.append("file", this.dataURLtoBlob(data)); // 通过append向form对象添加数据

        console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq",
          },
        };

        // 添加请求头
        axios.post(this.$upLoad, param, config).then((response) => {
          response = response.data;

          if (response.code === 200) {
            this.$postHttp("/mob/user/updateUserInfo", {
              id: this.user.id,
              image: response.data[0].url,
            }).then((data) => {
              if (data.code == 200) {
                self.imageUrl = response.data[0].url;
                this.user.image = response.data[0].url;
                this.$message({
                  message: "修改头像成功！",
                  type: "success",
                  offset: 120,
                  duration: 2000,
                });
                this.getUserInfo();
              }
            });
          }
        });
      });
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },

    //获取验证码
    getCode() {
      var reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
      if (!reg_tel.test(this.newPhone)) {
        this.$message({
          message: "请输入正确手机号！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      this.con2 = true
      // this.$getHttp("/mob/login/phoneVerification.do", {
      //   phone: this.newPhone,
      //   type: 1,
      // }).then((data) => {
      //   if (data.code == 200) {
      //     //假设请求成功，进入倒计时
      //     let time = setInterval(() => {
      //       if (this.codeTime == 0) {
      //         clearInterval(time);
      //         this.codeTime = 60;
      //       } else {
      //         this.codeTime = this.codeTime - 1;
      //       }
      //     }, 1000);
      //     this.$message({
      //       message: "获取验证码成功",
      //       type: "success",
      //       offset: 120,
      //       duration: 2000,
      //     });
      //   }
      // });
    },
    ycCon() {
      this.con2 = false
    },
    onSuccess() {
      var than = this;
      than.con2 = false;
      this.$getHttp("/mob/login/phoneVerification.do", {
        phone: this.newPhone,
        type: 1,
      }).then((data) => {
        this.$message({
          message: "获取验证码成功",
          type: "success",
          offset: 120,
          duration: 2000,
        });
        var set = setInterval(() => {
          if (than.codeTime < 1) {
            clearInterval(set);
            // than.yzm = "获取验证码";
            than.codeTime = 60;
            return;
          }
          than.codeTime--;
        }, 1000);
      });
    },
    onFail() {
      console.log("验证不通过");
      this.msg = "";
    },
    onRefresh() {
      console.log("点击了刷新小图标");
      this.msg = "";
    },
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    onAgain() {
      console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      // 刷新
      this.$refs.slideblock.reset();
    },
    btnSub(type) {
      if (type) {
        if (this.newPhone == '') {
          this.$message({
            message: "请输入手机号",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        this.updateUser({
          id: this.user.id,
          phone: this.newPhone,
          phoneCode: this.phoneCode,
        });
        this.phonestate = true;
        var mo = function (e) {
          e.preventDefault();
        };
        document.body.style.overflow = "hidden";
        document.addEventListener("touchmove", mo, false);
      } else {
        this.phonestate = false;
        var mo = function (e) {
          e.preventDefault();
        };
        document.body.style.overflow = ""; //出现滚动条
        document.removeEventListener("touchmove", mo, false);
      }
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.modifyPhone = (user.isAgent == "1" || user.isShop == "1") ? false : true
        console.log(this.modifyPhone);
        this.loginstate = true;
        this.user = user;
        this.imageUrl = user.image;
        this.userdata = {
          nikeName: user.nikeName,
          phone: user.phone,
        };
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        this.$router.push("/");
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    phoneCodeClick() {
      if (this.yzm != "获取验证码") {
        return;
      }
      var reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
      if (!reg_tel.test(this.phone)) {
        this.$message({
          message: "请输入正确手机号！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      this.$getHttp("/mob/login/phoneVerification.do", {
        phone: this.phone,
        type: 1,
      }).then((data) => {
        if (data.code == 200) {
          var set = setInterval(() => {
            if (this.shijian < 1) {
              clearInterval(set);
              this.yzm = "获取验证码";
              this.shijian = 60;
              return;
            }
            this.yzm = this.shijian + "s后重新发送";
            this.shijian--;
          }, 1000);
          this.$message({
            message: "获取验证码成功",
            type: "success",
            offset: 120,
            duration: 2000,
          });
        }
      });
    },
    updata(type) {
      switch (type) {
        case 1:
          this.updateUser({
            id: this.user.id,
            nikeName: this.user.nikeName,
          });
          break;
        case 2:
          this.newPhone = "";
          this.phoneCode = "";
          this.phonestate = true;
          var mo = function (e) {
            e.preventDefault();
          };
          document.body.style.overflow = "hidden";
          document.addEventListener("touchmove", mo, false);
          break;
        case 4:
          this.$confirm("此操作将永久注销该账号, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$postHttp("/mob/user/cancellation", {
                id: this.user.id,
              }).then((data) => {
                if (data.code == 200) {
                  this.$message({
                    type: "success",
                    message: "注销成功!",
                  });
                  localStorage.removeItem("userInfo");
                  this.$router.push({
                    path: "/",
                  });
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
          break;
      }
    },
    updateUser(data) {
      this.$postHttp("/mob/user/updateUserInfo", data).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "修改成功！",
            type: "success",
            offset: 120,
            duration: 2000,
          });
          this.getUserInfo();
        }
      });
    },
    getUserInfo() {
      this.$getHttp("/mob/login/getUserInfoByPhone", {
        phone: this.user.phone,
      }).then((data) => {
        if (data.code == 200) {
          localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
        }
      });
    },
    xuanClick(num) {
      this.xuan = num;
      switch (num) {
        case 1:
          this.$router.push({
            path: "/my/index",
          });
          break;
        case 3:
          this.$router.push({
            path: "/my/issue",
          });
          break;
        case 4:
          this.$router.push({
            path: "/my/collect",
          });
          break;
        case 5:
          this.$router.push({
            path: "/my/browsing",
          });
          break;
        case 6:
          this.$router.push({
            path: "/my/inform",
          });
          break;
        case 10:
          this.$router.push({
            path: "/my/instrument",
          });
          break;
      }
    },
    updatPwd(type) {
      if (type == 1) {
        if (this.oldpwd == '') {
          this.$message({
            message: "请输入旧密码",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.twopwd == '') {
          this.$message({
            message: "请输入新密码",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.onepwd.trim() == this.twopwd.trim()) {
          this.$postHttp("/mob/login/updatePassByPass", {
            id: this.user.id,
            password: this.twopwd.trim(),
            oldPassword: this.oldpwd.trim(),
          }).then((data) => {
            if (data.code == 200 && data.success) {
              this.$message({
                message: "密码修改成功！",
                type: "success",
                offset: 120,
                duration: 2000,
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                offset: 120,
                duration: 2000,
              });
            }
          });
        } else {
          this.$message({
            message: "2次新密码不一致！",
            type: "error",
            offset: 120,
            duration: 2000,
          });
        }
      } else {
        if (this.phone == '') {
          this.$message({
            message: "请输入手机号",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.phoneCode == '') {
          this.$message({
            message: "请输入验证码",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.twopwd == '') {
          this.$message({
            message: "请输入新密码",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.phoneCode) {
          this.$postHttp("/mob/login/updatePassByPass", {
            id: this.user.id,
            phone: this.phone,
            phoneCode: this.phoneCode,
            password: this.twopwd.trim(),
          }).then((data) => {
            if (data.code == 200 && data.success) {
              this.$message({
                message: "密码修改成功！",
                type: "success",
                offset: 120,
                duration: 2000,
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                offset: 120,
                duration: 2000,
              });
            }
          });
        } else {
          this.$message({
            message: "验证码不能为空",
            type: "error",
            offset: 120,
            duration: 2000,
          });
        }
      }
    },
    handleAvatarSuccess(response, file, fileList) {
      console.log("response", response);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$postHttp("/mob/user/updateUserInfo", {
        id: this.user.id,
        image: response.data[0].url,
      }).then((data) => {
        if (data.code == 200) {
          this.user.image = response.data[0].url;
          this.$message({
            message: "修改头像成功！",
            type: "success",
            offset: 120,
            duration: 2000,
          });
          this.getUserInfo();
        }
      });
    },
    operation() {
      this.$confirm(
        "此操作将" +
        this.options2[this.housevalue2 - 1].label +
        "该房源, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.houseList.forEach((e) => {
            if (e.choose) {
              this.$postHttp("/mob/home/updateUpStatus", {
                userId: this.user.id,
                id: e.id,
                upStatus: this.housevalue2,
              }).then((data) => {
                if (data.code == 200) {
                  this.$message({
                    message:
                      this.options2[this.housevalue2 - 1].label + "成功！",
                    type: "success",
                    offset: 120,
                    duration: 2000,
                  });
                  this.initgetHouseInfo();
                }
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消" + this.options2[this.housevalue2 - 1].label,
          });
        });
    },
    housecompile(type) {
      this.compilestate = type;
      // if(type){
      // 	this.compilestate = type
      // }else{
      // 	// let idList = []
      // 	// this.houseList.forEach((e) =>{
      // 	// 	if(e.choose){
      // 	// 		idList.push(e.id)
      // 	// 	}
      // 	// })
      // 	// if(idList.length == 0){
      // 	// 	this.compilestate = type
      // 	// 	return
      // 	// }
      // 	this.xzList = idList
      // }
    },
    openTop(index) {
      this.houseList.forEach((e) => {
        if (e.choose) {
          this.topVisible = true;
        }
      });
    },
    initgetHouseInfo() {
      this.housepage.pageNo = 1;
      this.getHouseInfo();
    },
    //确认置顶
    topSub() {
      if (this.day == "") {
        this.$message({
          message: "请输入置顶天数！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      } else {
        this.houseList.forEach((e) => {
          if (e.choose) {
            this.$postHttp("/mob/home/updateUpHomePage", {
              id: e.id,
              dayNum: this.day,
              isShow: this.housevalue,
            }).then((data) => {
              if (data.code == 200) {
                this.$message({
                  message: "置顶成功！",
                  type: "success",
                  offset: 120,
                  duration: 2000,
                });
                this.initgetHouseInfo();
              }
            });
          }
          e.choose = false;
        });
        this.topVisible = false;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type.substring(0, 5) === "image" || file.type.substring(6, 7) == 'g';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是图片格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2M");
        return;
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="less" scoped>
.con2 {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 991;

  .verify {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /deep/.slide-verify-slider {
      border: 0;
      margin-top: -5px;
    }
  }
}

.houselist {
  width: 936px;
  height: 820px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  vertical-align: top;
  display: inline-block;

  .h1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #333333;
  }

  .title {
    display: flex;
    padding: 25px 34px;
    color: #333333;
    font-size: 20px;
    align-items: center;
    border-bottom: #e0e0e0 1px solid;
    justify-content: space-between;
  }

  .ttext {
    margin-right: 60px;
    cursor: pointer;
  }

  .xttext {
    color: #64B6A8;
    font-size: 26px;
    margin-right: 54px;
    cursor: pointer;
  }

  .house {
    width: 100%;
    height: 630px;

    .houseview {
      width: 100%;
      height: 218px;
      padding: 32px;
      box-sizing: border-box;
      display: flex;

      img {
        width: 230px;
        height: 154px;
      }
    }
  }
}

.box {
  position: relative;
  padding-bottom: 200px;
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;

  .bianji {
    padding-bottom: 65px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;

    .ming {
      width: 876px;
      height: 56px;
      line-height: 56px;
      font-size: 20px;
      background: #f2f2f2;
      text-indent: 23px;
      margin-left: 32px;
      margin-top: 24px;
    }

    .lei {
      margin-top: 40px;

      .p {
        display: inline-block;
        vertical-align: unset;
        width: 100px;
        font-size: 20px;
        text-align: right;
        margin-left: 210px;
        margin-right: 70px;
        font-weight: 600;
      }

      .el-input {
        width: 220px;
        font-size: 18px;

        /deep/.el-input__inner {
          border: 0;
          color: #333;
          border-bottom: 1px solid #e0e0e0;
          box-sizing: content-box;
          /* padding-bottom: 15px; */
        }
      }

      .div {
        display: inline-block;
        margin-left: 40px;
        font-size: 20px;
        color: #2264d2;
        cursor: pointer;
      }
    }

    .wenben {
      width: 835px;
      margin-left: 52px;
      margin-top: 40px;

      h4 {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
        margin-bottom: 20px;
      }

      p {
        font-size: 20px;
        line-height: 45px;
      }
    }

    .but {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background: #64b6a8;
      border-radius: 5px;
      color: #fff;
      text-align: center;
      font-size: 19px;
      cursor: pointer;
      margin-left: 395px;
      margin-top: 40px;
    }
  }
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}

.Departure {
  display: flex;
  justify-content: center;
  margin-top: 20px;

  .btn {
    width: 200px;
    height: 50px;
    background: #64b6a8;
    border-radius: 6px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    margin-left: 30px;
    cursor: pointer;
  }
}

.avatar-uploader {
  display: inline-block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/deep/.el-input__inner {
  border-radius: 20px;
  border: #64B6A8 1px solid;
  color: #64B6A8;
}

/deep/.el-dialog__body {
  padding: 0px;

}

/deep/.el-dialog {
  border-radius: 20px;
}

.input_p {
  position: absolute;
  right: 170px;
  bottom: 285px;
  color: #64b6a8;
  font-size: 18px;
  cursor: pointer;
}

/deep/.el-tabs__header {
  width: 185px;
  left: 32%;
}

/deep/.el-tabs__item {
  font-size: 18px;
}

/deep/.is-active {
  font-weight: 600;
  color: #64B6A8;
}

/deep/.el-tabs__active-bar {
  background-color: #64B6A8;
  height: 3px;
}
</style>